<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>BLOG index with sidebar & slider  | Amaze UI Examples</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">
  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
    <!-- 引入 Bootstrap -->
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="assets/js/amazeui.min.js"></script>
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/search-form.css">
</head>

<body id="blog">

<header class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
    <div class="am-u-sm-8 am-u-sm-centered">
        <img width="200" src="http://s.amazeui.org/media/i/brand/amazeui-b.png" alt="Amaze UI Logo"/>
        <h2 class="am-hide-sm-only">中国首个开源 HTML5 跨屏前端框架</h2>
    </div>
</header>
<hr>
<!-- nav start -->
<nav class="am-g am-g-fixed blog-fixed blog-nav">
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button" data-am-collapse="{target: '#blog-collapse'}" ><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="blog-collapse">
    <ul class="am-nav am-nav-pills am-topbar-nav">
      <li class="am-active"><a href="lw-index.html">首页</a></li>
      <li><a href="lw-article.html">关注</a></li>
        <li><a href="lw-article.html">专题</a></li>
      <li><a href="lw-img.html">文友圈</a></li>
      <li><a href="lw-article-fullwidth.html">消息</a></li>
        <li class="am-dropdown" data-am-dropdown>
            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                我的 <span class="am-icon-caret-down"></span>
            </a>
            <ul class="am-dropdown-content">
                <li><a href="lw-index.html">个人主页</a></li>
                <li><a href="lw-index-nosidebar.html">收藏文章</a></li>
                <li><a href="index.html">登出</a></li>
            </ul>
        </li>
    </ul>
      <form class="am-topbar-form am-topbar-right am-form-inline" role="search">
          <div class="am-form-group">
              <input id="search" type="text" class="am-form-field am-input-sm" placeholder="搜索">
              <button type="button" onclick="searchTitle()">搜索</button>
          </div>
      </form>


  </div>
</nav>
<hr>
<!-- nav end -->
<!-- banner start -->
<div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-article-margin">
    <div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;controlNav&quot;:false}' >
    <ul id = "recommandArticles" class="am-slides">
            <li>
                <img src="https://upload-images.jianshu.io/upload_images/3959470-793dc8e56f839336.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp">
                <div class="blog-slider-desc am-slider-desc ">
                    <div class="blog-text-center blog-slider-con">
                        <span><a href="" class="blog-color">Article &nbsp;</a></span>
                        <h1 class="blog-h-margin"><a href="lw-article.html?articleId=4">愿你，归来仍是少年——纪念林清玄先生</a></h1>
                        <p class='line-limit-length'>林清玄的散文风格清新淡雅，自然随意，从细小的生活中发现小确幸，从人生的悲欢离合中寻找诗意和禅心。
                        </p>
                        <span class="blog-bor">2019年1月24日</span>
                        <br><br><br><br><br><br><br>
                    </div>
                </div>
            </li>

            <li>
                <img src="http://plgqvjyxr.bkt.clouddn.com/recommand2.jpg">
                <div class="blog-slider-desc am-slider-desc ">
                    <div class="blog-text-center blog-slider-con">
                        <span><a href="" class="blog-color">Article &nbsp;</a></span>
                        <h1 class="blog-h-margin"><a href="lw-article.html?articleId=5">离开，去远方。</a></h1>
                        <p class='line-limit-length'>总是呆在同一个地方，难免温水青蛙般的煮着，时间就是不温不火的毒药，在在不知不觉中荼毒着你。
                        </p>
                        <span class="blog-bor">2019年1月24日</span>
                        <br><br><br><br><br><br><br>
                    </div>
                </div>
            </li>
    </ul>
    </div>
</div>
<!-- banner end -->

<!-- content srart -->
<div class="am-g am-g-fixed blog-fixed">
    <div id = "articles" class="am-u-md-8 am-u-sm-12">

        <article class='am-g blog-entry-article'>
            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'>
                <img src='assets/i/f10.jpg' alt='' class='am-u-sm-12'>
            </div>
            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>
                <span><a href='' class='blog-color'>分类名 &nbsp;</a></span>
                <span> @作者 &nbsp;</span>
                <span>2015/10/9</span>
                <h1><a href=''>标题</a></h1>
                <p>我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变。
                </p>
                <p><a href='' class='blog-continue'>continue reading</a></p>
                <div class='line'>
                    <img src='http://plgqvjyxr.bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png' class='icon2'>
                    <p class='amount-text'>33</p>
                    <img src='http://plgqvjyxr.bkt.clouddn.com/like.png' class='icon2'>
                    <p class='amount-text'>54</p>
                    <img src='http://plgqvjyxr.bkt.clouddn.com/read.png' class='icon2'>
                    <p class='amount-text'>786</p>
                </div>
            </div>
        </article>

        <ul class="am-pagination">
            <li class="am-pagination-prev"><a href="">&laquo; Prev</a></li>
            <li class="am-pagination-next"><a href="">Next &raquo;</a></li>
        </ul>
    </div>

    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>推荐专题</span></h2>
            <div id = "topics">
                <article class='am-g blog-entry-article'>
                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 topic-entry-img'>
                        <img src='assets/i/f10.jpg' alt='' class='am-u-sm-12'>
                    </div>
                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>
                        <span><a href='' class='blog-color'>分类名 &nbsp;</a></span>
                        <span></span>
                        <p class="topic-entry-tiny-text">共234篇文章  7868人关注</p>
                    </div>
                </article>
            </div>

        </div>

            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>推荐作者</span></h2>
                <div id = "users">
                    <article class='am-g blog-entry-article'>
                        <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 topic-entry-img'>
                            <img src='assets/i/f10.jpg' alt='' class='user-img'>
                        </div>
                        <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>
                            <span><a href='' class='blog-color'>作者 &nbsp;</a></span>
                            <span></span>
                            <p class="topic-entry-tiny-text">共234篇文章  7868人关注</p>
                        </div>
                    </article>
                </div>
            </div>

    </div>


</div>
<!-- content end -->



  <footer class="blog-footer">
    <div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-footer-padding">
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
            <h3>模板简介</h3>
            <p class="am-text-sm">这是一个使用amazeUI做的简单的前端模板。<br> 博客/ 资讯类 前端模板 <br> 支持响应式，多种布局，包括主页、文章页、媒体页、分类页等<br>嗯嗯嗯，不知道说啥了。外面的世界真精彩<br><br>
            Amaze UI 使用 MIT 许可证发布，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 Amaze UI 及其副本。</p>
        </div>
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
            <h3>社交账号</h3>
            <p>
                <a href=""><span class="am-icon-qq am-icon-fw am-primary blog-icon blog-icon"></span></a>
                <a href=""><span class="am-icon-github am-icon-fw blog-icon blog-icon"></span></a>
                <a href=""><span class="am-icon-weibo am-icon-fw blog-icon blog-icon"></span></a>
                <a href=""><span class="am-icon-reddit am-icon-fw blog-icon blog-icon"></span></a>
                <a href=""><span class="am-icon-weixin am-icon-fw blog-icon blog-icon"></span></a>
            </p>
            <h3>Credits</h3>
            <p>我们追求卓越，然时间、经验、能力有限。Amaze UI 有很多不足的地方，希望大家包容、不吝赐教，给我们提意见、建议。感谢你们！</p>
        </div>
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
              <h1>我们站在巨人的肩膀上</h1>
             <h3>Heroes</h3>
            <p>
                <ul>
                    <li>jQuery</li>
                    <li>Zepto.js</li>
                    <li>Seajs</li>
                    <li>LESS</li>
                    <li>...</li>
                </ul>
            </p>
        </div>
    </div>
    <div class="blog-text-center">© 2015 AllMobilize, Inc. Licensed under MIT license. Made with love By LWXYFER</div>
  </footer>

<script type="text/javascript">
    // 不要括号
    var page = 0;
    var pageSize = 4;
    var maxPage = 0;

    $(document).ready(init());
    function init(){
        var topic = {"page":0,"pageSize":5}
        var article = {"page":page,"pageSize":pageSize}
        //文章列表
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8764/pcApi/article/index',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(article),
            success: function (data) {
                var list = data.data
                if(list.length > 0){
                    var articles = document.getElementById("articles")
                    var html = ""
                    for(i = 0;i < list.length;i++){
                        html += "<article class='am-g blog-entry-article'>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'>\n" +
                            "                <img src='" + list[i].img + "'alt='' class='am-u-sm-12'>\n" +
                            "            </div>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                            "                <span><a href='lw-topic.html?topicId=" + list[i].topic.id +"' class='blog-color'>" + list[i].topic.name + "&nbsp;</a></span>\n" +
                            "                <span> @" + list[i].user.username + "&nbsp;</span>\n" +
                            "                <span>" + format(list[i].createdAt) + "</span>\n" +
                            "                <h1><a href='lw-article.html?articleId=" + list[i].id +"'>" + list[i].title +"</a></h1>\n" +
                            "                <p class='line-limit-length'>" + list[i].content +"\n" +
                            "                </p>\n" +
                            "                <p><a href='' class='blog-continue'>continue reading</a></p>\n" +
                            "                <div class='line'>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>" + list[i].articleData.comment +"</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/like.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>" + list[i].articleData.like +"</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/read.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>" + list[i].articleData.read +"</p>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </article>"
                    }
                    html += "<ul class=\"am-pagination\">\n" +
                        "            <li class=\"am-pagination-prev\"><a onclick='prev()' \">&laquo; Prev</a></li>\n" +
                        "            <li class=\"am-pagination-next\"><a onclick='next()' \">Next &raquo;</button></li>\n" +
                        "        </ul>"
                    maxPage = data.maxPage;
                    articles.innerHTML = html
                    console.log(data)
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThown) {
                alert("操作失败！");
            }
        });
        var user = {}
        //推荐作者
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8764/pcApi/user/recommend',
            dataType: 'json',
            contentType: "application/json",
            data:JSON.stringify(user),
            success: function (data) {
                var list = data.data
                var users = document.getElementById("users")
                var html = ""
                for(i = 0;i < list.length;i++){
                    html += "<article class='am-g blog-entry-article'>\n" +
                        "                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 topic-entry-img'>\n" +
                        "                        <img src='" + list[i].idPhoto + "' alt=''  class='user-img'>\n" +
                        "                    </div>\n" +
                        "                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                        "                        <span><a href='lw-user.html?userId=" + list[i].id + "' class='blog-color'>" + list[i].username + "&nbsp;</a></span>\n" +
                        "                        <span></span>\n" +
                        "                        <p class=\"topic-entry-tiny-text\">共" + list[i].articles +"篇文章  " + list[i].followers +"人关注</p>\n" +
                        "                    </div>\n" +
                        "                </article>"
                }
                users.innerHTML = html
                console.log(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThown) {
                alert("操作失败！");
            }
        });
        //推荐专题
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8764/pcApi/topic/recommend',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(topic),
            success: function (data) {
                var list = data.data
                var topics = document.getElementById("topics")
                var html = ""
                for(i = 0;i < list.length;i++){
                    html += "<article class='am-g blog-entry-article'>\n" +
                        "                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 topic-entry-img'>\n" +
                        "                        <img src='" + list[i].img + "' alt='' class='am-u-sm-12'>\n" +
                        "                    </div>\n" +
                        "                    <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                        "                        <span><a href='lw-topic.html?topicId=" + list[i].id +"' class='blog-color'>" + list[i].name + "&nbsp;</a></span>\n" +
                        "                        <span></span>\n" +
                        "                        <p class=\"topic-entry-tiny-text\">共" + list[i].totalArticles +"篇文章  " + list[i].followers +"人关注</p>\n" +
                        "                    </div>\n" +
                        "                </article>"
                }
                topics.innerHTML = html
                console.log(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThown) {
                alert("操作失败！");
            }
        });

        //推荐文章
        /*$.ajax({
            type: 'POST',
            url: 'http://localhost:8764/pcApi/article/recommend',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                var list = data.data
                var recommandArticles = document.getElementById("recommandArticles")
                var html = ""
                for(i = 0;i < list.length;i++){
                    html += "<li>" +
                    "<img src=\"" + list[i].img +"\">" +
                        "<div class='blog-slider-desc am-slider-desc '>" +
                        "<div class='blog-text-center blog-slider-con'>" +
                        "<span><a href='' class='blog-color'>Article &nbsp;</a></span>" +
                    "<h1 class='blog-h-margin'><a href=''>" + list[i].title +"</a></h1>" +
                    "<p>" + list[i].content +"</p>" +
                    "<span class='blog-bor'>" + format(list[i].createdAt) +"</span>" +
                        "<br><br><br><br><br><br><br>" +
                        "</div>" +
                        "</div>" +
                        "</li>"
                }
                recommandArticles.innerHTML = html
                console.log(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThown) {
                alert("操作失败！");
            }
        });*/
    }

    function prev(){
        if(page == 0){
        }
        else {
            page -= 1;
            var article = {"page":page,"pageSize":pageSize}
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8764/pcApi/article/index',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(article),
                success: function (data) {
                    var list = data.data
                    var html = ""
                    for(i = 0;i < list.length;i++){
                        html += "<article class='am-g blog-entry-article'>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'>\n" +
                            "                <img src='" + list[i].img + "'alt='' class='am-u-sm-12'>\n" +
                            "            </div>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                            "                <span><a href='' class='blog-color'>" + list[i].topic.name + "&nbsp;</a></span>\n" +
                            "                <span> @" + list[i].user.username + "&nbsp;</span>\n" +
                            "                <span>" + format(list[i].createdAt) + "</span>\n" +
                            "                <h1><a href=''>" + list[i].title +"</a></h1>\n" +
                            "                <p class='line-limit-length'>" + list[i].content +"\n" +
                            "                </p>\n" +
                            "                <p><a href='' class='blog-continue'>continue reading</a></p>\n" +
                            "                <div class='line'>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>33</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/like.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>54</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/read.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>786</p>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </article>"
                    }
                    html += "<ul class=\"am-pagination\">\n" +
                        "            <li class=\"am-pagination-prev\"><a onclick='prev()' \">&laquo; Prev</a></li>\n" +
                        "            <li class=\"am-pagination-next\"><a onclick='next()'\">Next &raquo;</a></li>\n" +
                        "        </ul>"
                    $("#articles").html(html)
                    console.log(data)
                },
                error: function (XMLHttpRequest, textStatus, errorThown) {
                    alert("操作失败！");
                }
            });
        }

    }

    function next(){
        if(page == maxPage){
        }
        else {
            page += 1;
            var article = {"page":page,"pageSize":pageSize}
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8764/pcApi/article/index',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(article),
                success: function (data) {
                    var list = data.data
                    var html = ""
                    for(i = 0;i < list.length;i++){
                        html += "<article class='am-g blog-entry-article'>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'>\n" +
                            "                <img src='" + list[i].img + "'alt='' class='am-u-sm-12'>\n" +
                            "            </div>\n" +
                            "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                            "                <span><a href='' class='blog-color'>" + list[i].topic.name + "&nbsp;</a></span>\n" +
                            "                <span> @" + list[i].user.username + "&nbsp;</span>\n" +
                            "                <span>" + format(list[i].createdAt) + "</span>\n" +
                            "                <h1><a href=''>" + list[i].title +"</a></h1>\n" +
                            "                <p class='line-limit-length'>" + list[i].content +"\n" +
                            "                </p>\n" +
                            "                <p><a href='' class='blog-continue'>continue reading</a></p>\n" +
                            "                <div class='line'>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>33</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/like.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>54</p>\n" +
                            "                    <img src='http://plgqvjyxr.bkt.clouddn.com/read.png' class='icon2'>\n" +
                            "                    <p class='amount-text'>786</p>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </article>"
                    }
                    html += "<ul class=\"am-pagination\">\n" +
                        "            <li class=\"am-pagination-prev\"><a onclick='prev()' \">&laquo; Prev</a></li>\n" +
                        "            <li class=\"am-pagination-next\"><a onclick='next()'\">Next &raquo;</a></li>\n" +
                        "        </ul>"
                    $("#articles").html(html)
                    console.log(data)
                },
                error: function (XMLHttpRequest, textStatus, errorThown) {
                    alert("操作失败！");
                }
            });
        }



    }

    function searchTitle() {
        var title = $("#search").val();
        if(title.length > 0){
            var article = {"page": page, "pageSize": pageSize,"title":title}
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8764/pcApi/article/search',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(article),
                success: function (data) {
                    var list = data.data
                    if(list.length > 0){
                        var articles = document.getElementById("articles")
                        var html = ""
                        for(i = 0;i < list.length;i++){
                            html += "<article class='am-g blog-entry-article'>\n" +
                                "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'>\n" +
                                "                <img src='" + list[i].img + "'alt='' class='am-u-sm-12'>\n" +
                                "            </div>\n" +
                                "            <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'>\n" +
                                "                <span><a href='lw-topic.html?topicId=" + list[i].topic.id +"' class='blog-color'>" + list[i].topic.name + "&nbsp;</a></span>\n" +
                                "                <span> @" + list[i].user.username + "&nbsp;</span>\n" +
                                "                <span>" + format(list[i].createdAt) + "</span>\n" +
                                "                <h1><a href='lw-article.html?articleId=" + list[i].id +"'>" + list[i].title +"</a></h1>\n" +
                                "                <p class='line-limit-length'>" + list[i].content +"\n" +
                                "                </p>\n" +
                                "                <p><a href='' class='blog-continue'>continue reading</a></p>\n" +
                                "                <div class='line'>\n" +
                                "                    <img src='http://plgqvjyxr.bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png' class='icon2'>\n" +
                                "                    <p class='amount-text'>" + list[i].articleData.comment +"</p>\n" +
                                "                    <img src='http://plgqvjyxr.bkt.clouddn.com/like.png' class='icon2'>\n" +
                                "                    <p class='amount-text'>" + list[i].articleData.like +"</p>\n" +
                                "                    <img src='http://plgqvjyxr.bkt.clouddn.com/read.png' class='icon2'>\n" +
                                "                    <p class='amount-text'>" + list[i].articleData.read +"</p>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "        </article>"
                        }
                        html += "<ul class=\"am-pagination\">\n" +
                            "            <li class=\"am-pagination-prev\"><a onclick='prev()' \">&laquo; Prev</a></li>\n" +
                            "            <li class=\"am-pagination-next\"><a onclick='next()' \">Next &raquo;</button></li>\n" +
                            "        </ul>"
                        maxPage = data.maxPage;
                        articles.innerHTML = html
                        console.log(data)
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThown) {
                    alert("操作失败！");
                }
            });
        }

    }

    var format = function(time){
        var format = "yyyy年MM月dd日 HH:mm"
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? '0' : '') + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
            switch(a){
                case 'yyyy':
                    return tf(t.getFullYear());
                    break;
                case 'MM':
                    return tf(t.getMonth() + 1);
                    break;
                case 'mm':
                    return tf(t.getMinutes());
                    break;
                case 'dd':
                    return tf(t.getDate());
                    break;
                case 'HH':
                    return tf(t.getHours());
                    break;
                case 'ss':
                    return tf(t.getSeconds());
                    break;
            }
        })
    }

</script>




<!--[if (gte IE 9)|!(IE)]><!-->
<!--<![endif]-->
<!--[if lte IE 8 ]>

</body>
</html>
